import Menu from '@/components/ui/Menu'

const MenuGroup = () => {
    return (
        <div
            className="border border-gray-200 dark:border-gray-700 rounded-md p-2"
            style={{ maxWidth: 250 }}
        >
            <Menu>
                <Menu.MenuGroup key="group-1" label="گروه 1">
                    <Menu.MenuItem eventKey="group-1-item-1">
                        آیتم 1
                    </Menu.MenuItem>
                    <Menu.MenuItem eventKey="group-1-item-2">
                        آیتم 2
                    </Menu.MenuItem>
                    <Menu.MenuCollapse eventKey="group-1-item-3" label="آیتم 3">
                        <Menu.MenuItem eventKey="group-1-item-3-1">
                            آیتم 3.1
                        </Menu.MenuItem>
                        <Menu.MenuItem eventKey="group-1-item-3-2">
                            آیتم 3.2
                        </Menu.MenuItem>
                    </Menu.MenuCollapse>
                </Menu.MenuGroup>
                <Menu.MenuGroup key="group-2" label="گروه 2">
                    <Menu.MenuItem eventKey="group-2-item-1">
                        آیتم 1
                    </Menu.MenuItem>
                    <Menu.MenuItem eventKey="group-2-item-2">
                        آیتم 2
                    </Menu.MenuItem>
                </Menu.MenuGroup>
            </Menu>
        </div>
    )
}

export default MenuGroup
